<template>
  <div>
    <el-form>
      <div>
        <span>任务单号 :</span>
        <el-input v-model="searchData.orderBillNos" size="mini" style="width: 300px" placeholder="任务单号" clearable></el-input>
        <el-button-group>
          <el-button @click="leftTabeDate" size="mini" style="margin-left: 20px" icon="el-icon-search">查询</el-button>
          <el-button @click="clearSearchData" size="mini" icon="el-icon-refresh" style="margin-left: 20px">重置</el-button>
        </el-button-group>
      </div>

    </el-form>

<!--    <div style="height: 40%;position: relative">-->
<!--      <div class="publicSearch">-->
<!--        <div>-->
<!--          <el-button-->
<!--              size="mini"-->
<!--              type="success"-->
<!--              round-->
<!--              icon="iconfont icon-hebing"-->
<!--              @click="dialogWaveRemake=true"-->
<!--              title="请勾选相同[生产任务单号/部门]的任务"-->
<!--          >波次合并</el-button>-->
<!--          <el-button-->
<!--              @click="initListData"-->
<!--              size="mini"-->
<!--              icon="el-icon-search"-->
<!--          >查询</el-button-->
<!--          >-->
<!--          <el-button @click="clearSearchData" size="mini" icon="el-icon-refresh"-->
<!--          >重置</el-button-->
<!--          >-->
<!--          生产任务单号-->
<!--            <el-input size="mini"-->
<!--                      v-model="searchData.orderBillNo"-->
<!--                      style="width: 200px"-->
<!--            ></el-input>-->
<!--        </div>-->


<!--      </div>-->
<!--      <el-dialog title="备注" :visible.sync="dialogWaveRemake" width="30%" >-->
<!--        <div>-->
<!--          <el-input v-model="remake" ></el-input>-->
<!--        </div>-->
<!--        <span slot="footer" class="dialog-footer">-->
<!--          <el-button @click="dialogWaveRemake=false">取 消</el-button>-->
<!--          <el-button type="primary" @click="commitMerge()">合并</el-button>-->
<!--        </span>-->
<!--      </el-dialog>-->

<!--&lt;!&ndash;      <el-table border highlight-current-row&ndash;&gt;-->
<!--&lt;!&ndash;                @row-click="upRowClick"&ndash;&gt;-->
<!--&lt;!&ndash;                @selection-change="handleSelectionChangeUP"&ndash;&gt;-->
<!--&lt;!&ndash;                :data="upData" height="calc(100% - 60px)" style="width: 100%">&ndash;&gt;-->

<!--&lt;!&ndash;        <el-table-column type="selection" width="55"></el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-table-column&ndash;&gt;-->
<!--&lt;!&ndash;            label="出库单号"&ndash;&gt;-->
<!--&lt;!&ndash;            sortable&ndash;&gt;-->
<!--&lt;!&ndash;            prop="soBillNo"&ndash;&gt;-->
<!--&lt;!&ndash;            align="center"&ndash;&gt;-->
<!--&lt;!&ndash;            header-align="center"&ndash;&gt;-->
<!--&lt;!&ndash;        >&ndash;&gt;-->

<!--&lt;!&ndash;        </el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-table-column&ndash;&gt;-->
<!--&lt;!&ndash;            label="生产任务单"&ndash;&gt;-->
<!--&lt;!&ndash;            sortable&ndash;&gt;-->
<!--&lt;!&ndash;            prop="billNo"&ndash;&gt;-->
<!--&lt;!&ndash;            align="center"&ndash;&gt;-->
<!--&lt;!&ndash;            header-align="center"&ndash;&gt;-->
<!--&lt;!&ndash;        >&ndash;&gt;-->
<!--&lt;!&ndash;        </el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-table-column&ndash;&gt;-->
<!--&lt;!&ndash;            label="物料名称"&ndash;&gt;-->
<!--&lt;!&ndash;            sortable&ndash;&gt;-->
<!--&lt;!&ndash;            align="center"&ndash;&gt;-->
<!--&lt;!&ndash;            prop="itemName"&ndash;&gt;-->
<!--&lt;!&ndash;            header-align="center"&ndash;&gt;-->
<!--&lt;!&ndash;        >&ndash;&gt;-->
<!--&lt;!&ndash;        </el-table-column>&ndash;&gt;-->

<!--&lt;!&ndash;        <el-table-column&ndash;&gt;-->
<!--&lt;!&ndash;            label="履约号"&ndash;&gt;-->
<!--&lt;!&ndash;            sortable&ndash;&gt;-->
<!--&lt;!&ndash;            prop="agreementNo"&ndash;&gt;-->
<!--&lt;!&ndash;            align="center"&ndash;&gt;-->
<!--&lt;!&ndash;            header-align="center"&ndash;&gt;-->
<!--&lt;!&ndash;        >&ndash;&gt;-->
<!--&lt;!&ndash;        </el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-table-column&ndash;&gt;-->
<!--&lt;!&ndash;            prop="uda3"&ndash;&gt;-->
<!--&lt;!&ndash;            label="部门"&ndash;&gt;-->
<!--&lt;!&ndash;            align="center"&ndash;&gt;-->
<!--&lt;!&ndash;            header-align="center"&ndash;&gt;-->
<!--&lt;!&ndash;        >&ndash;&gt;-->

<!--&lt;!&ndash;        </el-table-column>&ndash;&gt;-->


<!--&lt;!&ndash;      </el-table>&ndash;&gt;-->


<!--    </div>-->
    <div class="wrap" style="margin-top: 10px;height:calc(100% - 20px)">
      <div style="width: 50%">
        <div>

        </div>
        <div>


          <el-radio-group style="margin-left: 80%" v-model="leftType" @change="switchTable">
            <el-input
                v-model="searchData.keyWords"
                size="mini"
                placeholder="输入关键字搜索"/>
          </el-radio-group>
        </div>
        <el-table height="calc(100% - 50px)"
                  ref="sestion"
                  @row-click="leftRowClick"
                  @selection-change="handleSelectionChange"
                  border highlight-current-row :data="leftData" style="width: 100%">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
              label="物料代码"
              sortable
              prop="itemCode"
              align="center"
              header-align="center"
          >
          </el-table-column>
          <el-table-column
              label="物料名称"
              sortable
              prop="itemName"
              align="center"
              header-align="center"
          >
          </el-table-column>
          <el-table-column
              label="发料属性"
              sortable
              prop="feedCategory"
              align="center"
              header-align="center"
          >
          </el-table-column>

          <el-table-column
              label="任务单号"
              sortable
              prop="orderBillNo"
              align="center"
              header-align="center"
          >
          </el-table-column>
<!--          <el-table-column-->
<!--              label="供应商"-->
<!--              align="center"-->
<!--              header-align="center"-->
<!--          >-->
<!--          </el-table-column>-->
          <el-table-column
              prop="orderQuantity"
              sortable
              label="计划数量"
              align="center"
              header-align="center"
          >
          </el-table-column>

          <el-table-column
              prop="adItemName"
              sortable
              label="产品型号"
              align="center"
              header-align="center"
          >
          </el-table-column>
          <el-table-column
              prop="allottedQuantity"
              label="已分配数量"
              sortable
              align="center"
              header-align="center"
          >
          </el-table-column>
          <el-table-column
              label="差异"
              sortable
              align="center"
              header-align="center"
          >
            <template slot-scope="scope">
            <span>{{
                !((scope.row.orderQuantity - scope.row.allottedQuantity) > 0) ? 0 : (scope.row.orderQuantity - scope.row.allottedQuantity)
              }}</span
            >
            </template>

          </el-table-column>


        </el-table>

        <el-pagination
            class="pagination-bottom pagination-fr"
            style="text-align: right"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :current-page.sync="searchData.pageNum"
            :page-size="searchData.pageSize"
            :page-sizes="[50, 100, 150, 200]"
            layout="sizes,total, prev, pager, next, jumper"
            :total="searchData.total"
        >
        </el-pagination>
      </div>
      <div style="width: 49%">
        <div style="margin-left: 10%">
          <span>
          借料数量{{ rawNumber }}/{{ allNumber }}
          </span>

          <span style="margin-left: 10px">
          任务单号：
          </span>
          <el-input size="mini"
                    v-model="leftSendData.billNo"
                    style="width: 200px"
          ></el-input>
          <el-button type="primary" size="mini">查询</el-button>
          <el-button type="primary"  @click="leftSendData.billNo=''" size="mini">重置</el-button>
          <span style="float:right ">


            <el-button @click="submitQitao" type="primary"
                       :disabled="isFreezeBtn"
                       size="mini">提交
            </el-button>
          </span>

        </div>



        <el-table height="calc(100% - 50px)" border highlight-current-row :data="rightData" style="width: 100%">
          <el-table-column
              label="产品型号"
              sortable
              prop="adItemName"
              align="center"
              header-align="center"
          >
          </el-table-column>
          <el-table-column
              sortable
              label="任务单号"
              prop="orderBillNo"
              align="center"
              header-align="center"
          >
          </el-table-column>
           <el-table-column
               sortable
              label="物料编码"
              prop="itemCode"
              align="center"
              header-align="center"
          >
          </el-table-column>
<!--           <el-table-column-->
<!--              label="时间"-->
<!--              prop="createTime"-->
<!--              align="center"-->
<!--              header-align="center"-->
<!--          >-->
<!--          </el-table-column>-->
          <el-table-column
              sortable
              label="物料名称"
              prop="itemName"
              align="center"
              header-align="center"
          >
          </el-table-column>
          <el-table-column
              sortable
              label="规格型号"
              prop="spec"
              align="center"
              header-align="center"
          >
          </el-table-column>

          <el-table-column
              prop="deliveryQuantity"
              label="数量"
              align="center"
              header-align="center"
          >
          </el-table-column>

          <el-table-column
              label="借料数量"
              align="center"
              header-align="center"
          >

            <template slot-scope="scope">
              <el-input
                  v-model="scope.row.number"
                  type="number"
                  @change="onInputChange(scope.row)"
              >
              </el-input>
            </template>


          </el-table-column>

        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AnionSet",
  data() {
    // 校验规则
    return {
      // 用作查询的数据
      searchData: {
        // 仓库编码 获得当前仓库的编码
        wareId: PF.getLocal("wareId", "number"),
        total: null,
        nowIndex: null,
        orderBillNos: '',
        keywords: ''

      },

      leftType: 0,
      upData: [],
      orderBillNo: '',
      leftData: [],
      leftAllData: [],
      leftLendData: [],
      tableSelection: [],
      leftSendData:{
        billNo: '',
        itemCode: '',
        notBillNo: ''
      },
      search: '',
      rightData: [],
      dialogWaveRemake: false,
      flag: false,
      remake: '',
      rawNumber: 0,
      allNumber: 0,
      nowIndex: null,
      billNo: '',
      soDetailVo: {
        all: [],
        pickTaskVos: []
      }
    };
  },
  computed: {
    isFreezeBtn() {
      if (this.rawNumber > this.allNumber) {
        return true;
      } else {
        return false;
      }
    },


  },

  watch: {
    //
  },
// 页面加载时刷新
  //  created会失效
  //   1、router-view路由跳转使用keep-alive方式
  // 2、created和mounted只执行一次
  // 3、使用activated钩子，每次进入页面执行一次
  //  解决方案 :1、将要处理的方法，放在activated函数中
  //activated
  created() {
    this.searchData.pageNum = 1;
    this.searchData.pageSize = 50;
    //请求数据
    this.leftTabeDate();
  },
  methods: {
    onInputChange(row) {
      this.rawNumber = 0;
      for (const rowKey in this.rightData) {
        if (this.rightData[rowKey].number) {
          this.rawNumber += Number(this.rightData[rowKey].number);
        }
      }
    },
    commitMerge() {
      IOT.showOverlay("保存中，请稍等...");
      let list = PF.JSON(this.multipleSelection);
      let billNos = [];
      let noMergerMsg = "";
      for (let i = 0; i < list.length; i++) {
        // if (list[i].deliveryTime !== list[0].deliveryTime) {
        //   noMergerMsg = "qwe数量";
        // }
        billNos.push(list[i].soBillNo);
      }

      if (noMergerMsg === "") {
        IOT.getServerData(
            "/wave/masters/merge",
            "post",
            {billNos: billNos,remake:this.remake},
            ret => {
              IOT.hideOverlay();
              if (ret.code === 200) {
                IOT.tips("合并成功！", "success");
                this.getSoData();
                this.remake = '';
                this.multipleSelection = [];
                this.dialogWaveRemake = false;

              } else {
                IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
              }
            }
        );
      } else {
        IOT.tips(
            noMergerMsg + "不同,不能合并! 请重新选择",
            "error",
            1000,
            () => {
              IOT.hideOverlay();
            }
        );
      }
    },
    //分页设置每页的条数
    handleSizeChange(val) {
      this.searchData.pageSize = val;
      this.leftTabeDate();
    },
    //分页设置从第几条开始
    handleCurrentChange(val) {
      this.searchData.pageNum = val;
      this.leftTabeDate();
    },
    // 创建查询条件批次号
    clearSearchData() {
      this.searchData.orderBillNos = '';
      this.searchData.keywords = '';
      this.leftTabeDate();
    },

    //借料项全部项切换
    switchTable() {
    },
    //双击事件
    editInput(row) {
      this.nowIndex = row
      this.flag = true
    },

    submitQitao() {
      IOT.showOverlay("保存中，请稍等...");
      console.log(this.tableSelection, "this.tableSelection");
      console.log(this.rightData, "this.rightData");

      this.soDetailVo.leftDetail = this.tableSelection[0];
      this.soDetailVo.rightDetail = this.rightData;
      console.log("this.soDetailVo", this.soDetailVo)
      IOT.getServerData('/dispatch/dispatch', 'post', this.soDetailVo, (ret) => {
        if (ret.code === 200) {
          this.rightData = null;
          IOT.tips('保存成功！', 'success', 1000, () => {
            this.leftTabeDate();
            console.log(this.rightData, 'this.rightData')
            IOT.hideOverlay();

          });
        } else {
          IOT.tips(ret.message || '服务器请求失败，稍后再试！', 'error');
          IOT.hideOverlay();
        }
      });

    },
    upRowClick(row, column, event) {
      this.billNo = row.billNo;
      console.log(row, "row")
      this.rawNumber = 0;
      this.allNumber = 0;
      this.leftData = null;
      this.rightData = null;
      this.leftTabeDate(this.billNo);
    },

    leftTabeDate() {
      IOT.getServerData("/dispatch/detail", "get", this.searchData, ret => {
        if (ret.code === 200) {
          // rows就是返回的数据
          console.log(ret,'ret')
          this.leftData = ret.data.list;
          this.searchData.total = ret.data.total;
        } else {
          IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
        }

      }, true);
    },
    //左边行选择
    leftRowClick(row, column, event) {
      //清空
      this.$refs.sestion.clearSelection()
      //添加
      this.$refs.sestion.toggleRowSelection(row)
      console.log(this.tableSelection,'this.tableSelection')
      this.rawNumber = 0;
      this.allNumber  = (row.orderQuantity - row.allottedQuantity)<=0?0:(row.orderQuantity - row.allottedQuantity)
      this.leftSendData.itemCode= row.itemCode
      this.leftSendData.notBillNo= row.billNo
      this.findLeftList();

    },

    findLeftList() {
      IOT.getServerData("/dispatch/beBeing", "get", this.leftSendData, ret => {
        if (ret.code === 200) {
          this.rightData = ret.data
        } else {
          IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
        }

      }, true);
    },

    handleSelectionChangeUP(val) {
      this.multipleSelection = val;
    },
    handleSelectionChange(val) {
      this.tableSelection = val;
      console.log(this.tableSelection, 'valvalval');
    },
    initListData() {
      this.leftData = [];
      this.rightData = [];
      IOT.getServerData("/dispatch/list", "get", this.searchData, ret => {
        if (ret.code === 200) {
          // rows就是返回的数据
          // console.log(ret);
          console.log(ret.rows, "ret.rows")
          this.upData = ret.rows;
          this.searchData.total = ret.total;
          this.searchData.pageNum = ret.pageNumber;
        } else {
          IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
        }
      });

    }
  }
};
</script>

<style scoped>
.wrap {
  display: flex;
  justify-content: space-between;
}

.pagination-fr {
  position: absolute !important;
  bottom: 5px;
  right: 10px;
}

.el-span-box {
  float: left;
  width: 100%;
  height: 100%;
  /*background-color: #000;*/
  min-height: 30px;
}
</style>
